<template>
	<div class="recipe">
		<div class="info">
			<el-row>
				<el-col :span="7">
					<img
						:src="info.product_pic_url"
						alt="成品图"
						class="product_img"
					/>
				</el-col>
				<el-col :span="17">
					<div class="title">
						<h1>{{ info.title }}</h1>
						<el-tag
							class="toggle_following"
							:type="info.isCollection ? 'success' : 'info'"
							size="mini"
							@click="changeCollection"
						>
							{{ info.isCollection ? '已收藏' : '收藏' }}
						</el-tag>
					</div>
					<ul class="list">
						<li
							v-for="item in info.properties_show"
							:key="item.type"
						>
							<span>{{ item.parent_name }}</span
							><br />
							<h2>{{ item.name }}</h2>
						</li>
					</ul>
					<div class="user_info">
						<el-row :gutter="5">
							<el-col :span="2">
								<el-avatar
									:size="60"
									:src="userInfo.avatar"
								></el-avatar>
							</el-col>
							<el-col :span="22">
								<h4>{{ userInfo.name }}</h4>
								<span>
									菜谱：{{ userInfo.work_menus_len }}
									&nbsp;&nbsp; /&nbsp;&nbsp;
								</span>
								<span>
									关注：{{ userInfo.follows_len }}
									&nbsp;&nbsp; /&nbsp;&nbsp;
								</span>
								<span>粉丝：{{ userInfo.following_len }}</span
								><br />
								<span class="create_date">
									{{
										userInfo.createdAt | formatDate()
									}}</span
								>
							</el-col>
						</el-row>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="material">
			<h1 class="no-select">用料</h1>
			<hr />
			<br />

			<ul>
				<li><el-tag type="info" size="mini">主料</el-tag></li>
				<li v-for="item in material.main_material" :key="item._id">
					{{ item.name }}
				</li>
			</ul>
			<br />
			<ul>
				<li><el-tag type="info" size="mini">辅料</el-tag></li>
				<li
					v-for="item in material.accessories_material"
					:key="item._id"
				>
					{{ item.name }}
				</li>
			</ul>
		</div>
		<div class="steps">
			<h1 class="no-select">{{ info.title }}的做法</h1>
			<hr />
			<ul>
				<li v-for="(item, index) in info.steps" :key="index">
					<h1 class="no-select">{{ index + 1 }}.</h1>
					<span class="step_text">{{ item.describe }}</span
					><br />
					<img v-if="item.img_url" :src="item.img_url" />
				</li>
			</ul>
			<h1>烹饪技巧</h1>
			<hr />
			<span class="skill"> {{ info.skill }}</span>
		</div>
		<div class="comment">
			<h1>水煮牛肉的评论</h1>
			<hr />
			<el-row :gutter="20">
				<el-col :span="2">
					<img
						src="http://39.102.89.187:7001/static/upload/user/21051653035555025.png"
						alt=""
					/>
				</el-col>
				<el-col :span="22">
					<el-input
						type="textarea"
						:rows="12"
						placeholder="请输入内容"
						v-model="comment"
					>
					</el-input>
					<el-button class="submit" @click="addComment"
						>提交</el-button
					>
				</el-col>
			</el-row>
			<hr />
			<ul>
				<li
					class="comment_user"
					v-for="item in comments"
					:key="item.commentId"
				>
					<el-row :gutter="10">
						<el-col :span="2">
							<img :src="item.userInfo.avatar" alt="" />
							<br />
							<span class="user_name">{{
								item.userInfo.name
							}}</span>
						</el-col>
						<el-col :span="22">
							<span class="commont_text">
								{{ item.commentText }}
							</span>
							<br />
							<span class="create">{{
								item.createdAt | formatDate()
							}}</span>
						</el-col>
					</el-row>
					<hr />
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { addComment, getComment, getMenuInfo } from '@/api/menu';
import { toggleCollection, getUserInfo } from '@/api/user';
export default {
	data() {
		return {
			comment: '',
			info: {},
			userInfo: {},
			material: {}, // 材料 避免for循环报错
			comments: [],
		};
	},
	created() {
		this.getInfo();
	},
	filters: {
		// 截取日期 xxxx-xx-xx 格式
		formatDate(value) {
			if (!value) return;
			return value.substr(0, 10);
		},
	},
	methods: {
		getInfo() {
			getMenuInfo({ menuId: this.$route.query.menuId }).then((res) => {
				this.info = res.data.info;
				this.material = res.data.info.raw_material;
			});
			getUserInfo({ userId: this.$route.query.userId }).then((res) => {
				this.userInfo = res.data;
			});
			getComment({ menuId: this.$route.query.menuId }).then((res) => {
				this.comments = res.data.comments;
			});
		},
		addComment() {
			addComment({
				menuId: this.$route.query.menuId,
				commentText: this.comment,
			}).then((res) => {
				this.$message.success(res.mes);
				getComment({ menuId: this.$route.query.menuId }).then((res) => {
					this.comments = res.data.comments;
					this.comment = '';
				});
			});
		},
		changeCollection() {
			toggleCollection({ menuId: this.$route.query.menuId }).then(
				(res) => {
					this.info.isCollection = res.data.isCollection;
				}
			);
		},
	},
};
</script>

<style lang='sass'>
.info
	background-color: #fff
	height: 470px
	.toggle_following
		cursor: pointer
	.title
		padding: 20px
		display: flex
		justify-content: space-between
		h1
			font-size: 40px
			font-weight: normal
	.list
		width: 100%
		li
			float: left
			width: 241px
			height: 60px
			border: 1px solid #f6f6f6
			padding: 20px
			span
				color: #999
				font-size: 14px
			h2
				font-weight: normal
				color: #c90000
	.user_info
		clear: both
		padding-top: 20px
		padding-left: 20px
		h4
			color: #c90000
			padding-bottom: 10px
			font-size: 14px
			line-height: 12px
		span
			font-size: 12px
			color: #666
		.create_date
			color: #999
	.product_img
		width: 100%
		height: 100%

	.user_info
		.el-row
			padding: 0 !important
			margin: 0 !important

.material
	margin-top: 20px
	background-color: #fff
	h1
		font-weight: normal
		padding: 20px
	hr
		#f5f5f5
	ul
		height: 50px
		margin-left: 20px
		li
			float: left
			margin-right: 10px
			border: 1px solid #999
			padding: 5px
			font-size: 12px
		li:first-child
			border: none
.steps
	margin-top: 20px
	padding: 0 20px
	background-color: #fff
	h1
		font-weight: normal
		padding: 20px
	ul
		li
			margin-top: 20px
			h1
				font-size: 40px
				color: #c90000
				font-style: oblique
				display: inline
			span
				font-style: 12px
				color: #666
			img
				width: 50%
				margin: 20px 50px
	.skill
		display: block
		margin-top: 50px
		padding-bottom: 50px
		font-size: 14px
		padding-left: 100px
		padding-right: 20px
.comment
	padding: 20px
	background-color: #fff
	margin-top: 20px
	h1
		font-weight: normal
		padding: 20px
	hr
		color: #f5f5f5
	.el-row
		.el-col
			padding: 20px
			img
				margin-left: 20px
				width: 40px
			.submit
				background-color: #f00
				color: #fff
				float: right
				margin-top: 20px
	.comment_user
		.el-row
			margin-left: 20px !important
			margin: 20px 0
			img
				width: 50px
				height: 50px
				border-radius: 10px
		.user_name
			font-size: 12px
			padding-left: 20px
		.commont_text
			font-size: 14px
			line-height: 30px
		.create
			font-size: 12px
			color: #a6adaf
</style>